<!-- LoginPage.vue -->
<template>
    <div class="login-container">
        <a-form ref="form" @submit="handleSubmit">
            <a-form-item label="用户名" :rules="{ required: true }">
                <a-input v-model="username" placeholder="请输入用户名">
                    <!-- <a-icon slot="prefix" type="userOutlined" /> -->
                </a-input>
            </a-form-item>
            <a-form-item label="密码" :rules="{ required: true }">
                <a-input-password v-model="password" placeholder="请输入密码" />
            </a-form-item>
            <a-form-item>
                <a-button type="primary" html-type="submit" :loading="loginFormState.loading"
                    style="width: 100%;">登录</a-button>
            </a-form-item>
        </a-form>
    </div>
</template>

<script setup lang="ts">
import { ref, reactive, Ref } from 'vue';
import { FormInstance } from 'ant-design-vue';

const username = ref('admin');
const password = ref('admin');

let isLogined: Ref<boolean> = ref(false);

const loginFormState = reactive<{ loading: boolean }>({
    loading: false,
});

async function handleSubmit(formEvent: FormInstance) {
    console.log('formEvent:: ', formEvent);
    try {
        loginFormState.loading = true;
        // 模拟异步登录请求
        await new Promise((resolve) => setTimeout(resolve, 2000));
        console.log('登录信息：', username.value, password.value);
        if (username.value === 'admin' && password.value === '123456') {
            // 登录成功
            // 在实际项目中，此处应调用接口进行登录，并根据返回结果处理后续逻辑
            alert('登录成功');
            isLogined.value = true;
        }
        throw new Error('用户名或密码错误');

        // 在实际项目中，此处应调用接口进行登录，并根据返回结果处理后续逻辑
    } catch (error) {
        // 处理错误
        console.error('登录失败：', error);
    } finally {
        loginFormState.loading = false;
    }
}

</script>

<style scoped>
.login-container {
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    /* background-color: #f0f2f5; */
    /* background-image: url('@/assets/vue.svg');
    background-size: cover;
    background-position: center; */

}
</style>
